<template>
  <view class="leav">
    <view class="name">{{data.name}}</view>
    <view :style="'filter: drop-shadow(0 4px 2px '+ data.color + ');'">
      <view class="text" :style="'background:'+ data.color+';' ">{{data.text}}<view class="sanjiao" :style="'border-color:  transparent transparent '+ data.color+' transparent;' "> </view></view>
      
    </view>
  </view>
</template>

<script>
  export default {
    name:"msg",
    data() {
      return {
        
      };
    },props:{
      data:{
        type:Object
      }
    }
  }
</script>

<style lang="scss">
  .leav{
    padding: 10px;
  }
.name{
  font-size: 15px;
  font-weight: bold;
  color: #000;
  margin: 10px 3px;
}
.text{
  padding: 8px;
  min-width: 2rem;
  position: relative;
  display: inline-flex;
  max-width: 700rpx;
  
    word-break: break-word;
    white-space: pre-line;
  border-radius: 10px;
  .sanjiao{
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    top: -20px;
    left: 12px;
    border-width: 10px;
    border-style: solid;
  }
}

</style>